<template>
  <div class="home page page_padding">
    <h1 class="tips">首页</h1>

    <h3 class="tips">公开的图片</h3>
    <ScrollSelector class="scroller_container" marginHorizontal="24px">
      <div class="scroller">
        <transition-group name="slide-fade">
          <router-link v-for="img in images" :to="`/image/${img?.iid}`" :key="img?.iid">
            <ArticleCard :src="`${apis.static}/file/${img?.fencodedMd5}`" :intro="img?.fname" />
          </router-link>
        </transition-group>
      </div>
    </ScrollSelector>
    <h3 class="tips">公开的视频</h3>
    <div class="container">
      <transition-group name="slide-fade">
        <router-link v-for="video in videos" :to="`/video/${video?.vid}`" :key="video?.vid">
          <div class="square_item">
            <span>{{ video?.fname }}</span>
            <small>{{ video?.fuploadTime }}</small>
          </div>
        </router-link>
      </transition-group>
    </div>
    <h3 class="tips">公开的音乐</h3>
    <div class="container">
      <transition-group name="slide-fade">
        <router-link v-for="music in musics" :to="`/music/${music?.mid}`" :key="music?.mid">
          <div class="square_item">
            <span>{{ music?.fname }}</span>
            <small>{{ music?.fuploadTime }}</small>
          </div>
        </router-link>
      </transition-group>
    </div>

    <h3 class="tips">公开的文章</h3>
    <div class="container">
      <transition-group name="slide-fade">
        <router-link
          v-for="article in articles"
          :to="`/article/${article?.aid}`"
          :key="article?.aid"
        >
          <SingleArticle :title="article?.atitle" :content="article?.acontent" />
        </router-link>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { apis } from "../api";
import ArticleCard from "../components/ArticleCard.vue";
import ScrollSelector from "../components/ScrollSelector.vue";
import SingleArticle from "../components/SingleArticle.vue";

export default {
  components: { ArticleCard, ScrollSelector, SingleArticle },
  setup() {
    const data = reactive({
      images: [],
      videos: [],
      musics: [],
      articles: []
    })

    const getAllPublicFile = () => {
      apis.getAllPublicFile().then(response => {
        response?.data?.result?.forEach(element => {
          if (element?.iid) data.images.push(element)
          if (element?.mid) data.musics.push(element)
          if (element?.vid) data.videos.push(element)
        })
      })
      apis.getAllPublicArticle().then(response => {
        response?.data?.result?.forEach(element => {
          data.articles.push(element)
        })
      })
    }

    getAllPublicFile()
    return { ...toRefs(data), apis }
  }
}
</script>

<style lang="less" scoped>
.home {
  color: white;
  padding: 64px 0;
}

.scroller_container {
  color: white;
  flex-shrink: 0;
}

.scroller {
  display: flex;
  gap: 40px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.3%);
  gap: 20px;
  width: 100%;
}

.square_item {
  min-width: 200px;
  min-height: 125px;
  line-height: 24px;
  font-size: 16px;
  padding: 16px;
  display: flex;
  word-wrap: break-word;
  flex-direction: column;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.1);

  & small {
    width: 100%;
    display: block;
    text-align: right;
  }
}
</style>
